<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">
    <link href="../lib/icons.css" rel="stylesheet">

    <title>Test Panel - Metro UI :: Popular HTML, CSS and JS library</title>

</head>
<body class="m4-cloak">
<div class="container h-vh-100">

    <h1>Panel test page</h1>

    <div>
        <button class="button" onclick="Metro.getPlugin('#panel1', 'panel').open()">Open</button>
        <button class="button" onclick="Metro.getPlugin('#panel1', 'panel').close()">Close</button>
    </div>


    <div class="row h-100">
        <div class="cell-lg-6 p-10 h-100">
            <div data-role="panel" id="panel1"
                 data-title-caption="Panel title"
                 data-title-icon="<span class='mif-apps'></span>"
                 data-width="240"
                 data-collapsible="true"
                 data-draggable="true">
                Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies.
            </div>
        </div>
        <div class="cell-lg-6 p-10 dark-side h-100">
            <div data-role="panel" id="panel2"
                 data-title-caption="Panel title"
                 data-title-icon="<span class='mif-apps'></span>"
                 data-width="240"
                 data-collapsible="true"
                 data-draggable="true">
                Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies.
            </div>
        </div>
    </div>
</div>

<script src="../lib/metro.js"></script>
<script>
</script>
</body>
</html>
